<!-- 菜单右边顶部 -->

<template>
    <div class="header">
        <div class="icon activetransi" @click="operation" :class="{ active: isCollapse }">
            <el-icon :size="28"><Operation /></el-icon>
        </div>
        <div class="centre">Vite + Vue3 + Ts 后台管理系统</div>
        <div class="info">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ store.state.userName }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts" setup>
// import { defineEmits } from 'vue';
import { useStore } from '@/store';
import { useRouter } from 'vue-router';
/*定义父组件传过来Props值的类型 start */
interface Props {
    isCollapse: boolean;
}
//接收父组件传过来的值设置默认值
withDefaults(defineProps<Props>(), {
    isCollapse: false,
});

// vuex
const store = useStore();
// 路由信息
const router = useRouter();
// 退出登录
const logout = () => {
    localStorage.clear();
    router.push({ name: 'login' });
};
//注册emit
const emits = defineEmits(['operation']);
// 控制左边导航栏
const operation = () => {
    emits('operation');
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    .icon {
        width: auto;
        flex-shrink: 0;
    }
    .centre {
        flex: 1;
        flex-shrink: 0;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
    .info {
        width: auto;
        flex-shrink: 0;
        cursor: pointer;
        .el-dropdown-link {
            color: #303133;
        }
    }
}

.active {
    transform: rotate(90deg);
}
.activetransi {
    transition: all 0.2s;
}
</style>
